<template>
  <div class="swiper-container-new">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        :style="'backgroundImage:url(' + item.cover + ')'"
        v-for="(item, index) in imgs"
        :key="item.id"
        @click="chooseItem(item, index)"
      >
        <div class="swiper-slide-content"></div>
        <div
          class="swiper-slide-text line1"
          @click.stop="chooseItem(item, index)"
        >
          <!-- 文章简介文章简介文章简介文章简介文章简介 -->
          {{ item.title }}
        </div>
      </div>
      <!-- <div class="swiper-pagination2"></div> -->
    </div>
    <div class="swiper-btn-control btn-control1" @click.stop="prev">
      <span class="el-icon-arrow-left btn-control"></span>
    </div>
    <div class="swiper-btn-control btn-control2" @click.stop="next">
      <span class="el-icon-arrow-right btn-control"></span>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      item: {},
      imgList: [],
      mySwiper2: null,
      imgs: [],
    };
  },
  created() {
    //获取首页广告
    this.$getHttp("/api/mobile/vehicleOwner/getCarouselChartsByType", {
      carouselType: "2",
      type: "1",
    }).then((data) => {
      if (data.code == 200) {
        data.carouselChartsList.pageList.forEach((e, i) => {
          this.imgs.push(
            ...[
              {
                id: e.id,
                index: i,
                title: e.title,
                cover: e.picturePath,
              },
            ]
          );
        });
        data.carouselChartsList.pageList.forEach((e, i) => {
          this.imgs.push(
            ...[
              {
                id: e.id,
                index: i,
                title: e.title,
                cover: e.picturePath,
              },
            ]
          );
        });
        this.imgList = data.carouselChartsList.pageList;
        setTimeout(() => {
          // https://blog.csdn.net/qq_41046662/article/details/88035800
          this.mySwiper = new Swiper(".swiper-container-new", {
            direction: "horizontal", // 水平切换选项    垂直vertical  默认是水平切换模式
            loop: true, // 循环模式选项s

            // slidesPerView: 6,
            // slidesOffsetBefore: 350,

            // loopAdditionalSlides: 2,
            // slidesPerView: 2,
            slidesPerGroup: 2,
            speed: 1200,
            autoplay: {
              // 自动滑动

              stopOnLastSlide: true,
              speed: 2000,
              delay: 3000, //5秒切换一次
              disableOnInteraction: false,
            },
            // pagination: {
            //   el: ".swiper-pagination2", //分页器 -
            // },

            // noSwiping: false, //设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动，希望文字被选中时可以考虑使用。该类名可通过noSwipingClass修改
            // watchSlidesProgress: true, //开启这个参数来计算每个slide的progress(进度、进程)
            // paginationClickable: false,
            slidesPerView: "auto", //设置slider容器能够同时显示的slides数量
            spaceBetween: 24, //在slide之间设置距离 默认单位px 也可以设置% vw vh ....
            // centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左
            slidesOffsetBefore: 71, //设定slide与左边框的预设偏移量 还有slidesOffsetAfter 反之
            // slidesOffsetAfter: 71,
          });
        }, 200);
      }
    });
  },
  mounted() {},
  methods: {
    // 点击
    chooseItem(item, index) {
      // console.log(this.imgList, index);

      this.imgList.forEach((el) => {
        if (item.cover == el.picturePath) {
          console.log(el);
          el.bid = 2;
          // return
          localStorage.setItem("banner", JSON.stringify(el));
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner",
          });
          window.open(routeLink.href, "_blank");
        }
      });
    },

    next() {
      this.mySwiper.slideNext();
    },
    prev() {
      this.mySwiper.slidePrev();
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-container-new {
  margin: 0 auto;
  width: 1200px;
  height: 300px;
  position: relative;
  overflow: hidden;

  .swiper-wrapper {
    height: 100%;
    white-space: nowrap;
    display: flex;

    .swiper-slide {
      position: relative;
      display: inline-block;
      vertical-align: top;
      flex-shrink: 0;
      width: 517px;
      height: 100%;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 12px 12px 12px 12px;
      overflow: hidden;

      &.swiper-slide-active {
        .swiper-slide-content {
          background: linear-gradient(
            180deg,
            rgba(153, 153, 153, 0) 80%,
            rgba(153, 153, 153, 0.85) 100%
          );
        }

        .swiper-slide-text {
          display: block;
        }
      }

      &.swiper-slide-active + .swiper-slide {
        .swiper-slide-content {
          background: linear-gradient(
            180deg,
            rgba(153, 153, 153, 0) 80%,
            rgba(153, 153, 153, 0.85) 100%
          );
        }

        .swiper-slide-text {
          display: block;
        }
      }

      .swiper-slide-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: rgba(153, 153, 153, 0.5);
        opacity: 1;
      }

      .swiper-slide-text {
        display: none;
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        height: 28px;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
        cursor: pointer;
      }
    }
  }

  &:hover {
    .swiper-btn-control {
      opacity: 1;
    }
  }

  .swiper-btn-control {
    border-width: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    width: 32px;
    height: 32px;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.5);

    &.btn-control1 {
      left: 90px;
    }

    &.btn-control2 {
      right: 90px;
    }

    .btn-control {
      color: #ffffff;
    }

    &:hover {
      .btn-control {
        color: #64b6a8;
      }
    }
  }
}
</style>
